<template>
  <div class="clearfix">
    <a-upload-dragger name="file" :fileList="[]" :beforeUpload="beforeUpload">
      <p class="ant-upload-drag-icon">
        <inbox-outlined />
      </p>
      <p class="ant-upload-text">点击或拖拽文件到这里</p>
    </a-upload-dragger>

    <a-modal
      destroyOnClose
      title="数据加载"
      v-model:visible="fileArgsModalShowed"
      @ok="onOk"
    >
      <div v-if="selectFile !== null">
        <ExcelArgsForms
          :fileName="selectFile.file.name"
          v-if="selectFile.isExcel"
        ></ExcelArgsForms>

        <CsvArgsForms
          :fileName="selectFile.file.name"
          v-if="selectFile.isCsv"
        ></CsvArgsForms>

        <FeatherArgsForms
          :fileName="selectFile.file.name"
          v-if="selectFile.isFeather"
        ></FeatherArgsForms>

        <NoSupportExt
          :fileName="selectFile.file.name"
          :suportExts="selectFile.allSupportExts"
          v-if="!selectFile.isSupportExt"
        ></NoSupportExt>
      </div>

      <template #footer>
        <a-spin v-if="loading" tip="文件有些大，去喝杯茶吧……"></a-spin>
        <a-button type="primary" @click="onOk" :disabled="loading"
          >加载</a-button
        >
      </template>
    </a-modal>
  </div>
</template>

// :http-request="upload"

<script land='ts'>
import { defineComponent, reactive, ref, toRef, computed } from "vue";

import useFileload from "./FileUpload";

import ExcelArgsForms from "./ExtForms/ExcelArgsForms.vue";
import CsvArgsForms from "./ExtForms/CsvArgsForms.vue";
import FeatherArgsForms from "./ExtForms/FeatherArgsForms.vue";
import NoSupportExt from "./ExtForms/NoSupportExt.vue";

import DataLoadStore from "@/store/DataLoadStore";
import { UploadFile } from "@/models/DataLoadModel";

export default defineComponent({
  name: "FileUpload",
  components: { ExcelArgsForms, CsvArgsForms, FeatherArgsForms, NoSupportExt },
  props: {},

  setup() {
    let { beforeUpload, fileArgsModalShowed, onOk, loading } = useFileload();
    let selectFile = DataLoadStore.getStateToRefs().File;
    // let isSupportExt = DataLoadStore.getStateToRefs().isSupportExt;
    // let isSupportExt = computed(() => {
    //   console.log("computed", selectFile.value === null);
    //   if (selectFile.value === null) {
    //     return false;
    //   }
    //   console.log("computed after if:", selectFile.value.isSupportExt);

    //   return selectFile.value.isSupportExt;
    // });

    return {
      selectFile,
      beforeUpload,
      fileArgsModalShowed,
      onOk,
      loading,
      // notSupportExt,
    };
  },
});
</script>
